<template>
    <div v-if="show" class="node-effect-container">
        <!-- 背景渐变 -->
        <div class="miku-background"></div>

        <!-- 中心曲谱效果 -->
        <div class="music-score-container">
            <!-- 曲谱线 -->
            <div class="score-lines">
                <div class="score-line line-1"></div>
                <div class="score-line line-2"></div>
                <div class="score-line line-3"></div>
                <div class="score-line line-4"></div>
                <div class="score-line line-5"></div>
            </div>

            <!-- 动态音符 -->
            <div ref="notesRef" class="notes-container"></div>
        </div>

        <!-- 浮动音符群 -->
        <div class="floating-notes">
            <div v-for="n in 20" :key="`floating-note-${n}`" class="floating-note">
                <div class="note-icon">{{ getRandomNoteSymbol() }}</div>
            </div>
        </div>

        <!-- 节奏波纹 -->
        <div class="rhythm-waves">
            <div class="wave wave-1"></div>
            <div class="wave wave-2"></div>
            <div class="wave wave-3"></div>
        </div>

        <!-- 闪光效果 -->
        <div class="sparkles">
            <div v-for="n in 30" :key="`sparkle-${n}`" class="sparkle"></div>
        </div>
    </div>
</template>

<script setup>
import {ref, watch, nextTick, onMounted, onUnmounted} from 'vue';

// 定义props，与其他特效组件保持一致的接口
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    duration: {
        type: Number,
        default: 8000 // 特效持续时间，默认8秒
    },
    intensity: {
        type: Number,
        default: 1.0 // 特效强度，范围0.5-2.0
    },
    character: {
        type: String,
        default: 'miku' // 角色标识，默认初音未来
    }
});

// 内部控制显示状态
const internalShow = ref(props.show);
const notesRef = ref(null);
let noteInterval = null;
const NOTE_SYMBOLS = ['♪', '♫', '♬', '♭', '♯', '♮', '♯', '♭'];

// 监听外部show属性变化
watch(() => props.show, (newValue) => {
    if (newValue) {
        internalShow.value = true;
        // 等待DOM渲染后，初始化特效
        nextTick(() => {
            initNotes();
            initFloatingNotes();
            initSparkles();
        });

        // 定时隐藏特效
        setTimeout(() => {
            internalShow.value = false;
        }, props.duration);
    } else {
        internalShow.value = false;
        // 清理特效
        clearNotes();
    }
});

// 暴露触发特效的方法
const emit = defineEmits(['effectEnd']);

// 监听内部显示状态变化，通知父组件特效结束
watch(internalShow, (newValue, oldValue) => {
    if (oldValue === true && newValue === false) {
        clearNotes();
        emit('effectEnd');
    }
});

// 获取随机音符符号
const getRandomNoteSymbol = () => {
    const randomIndex = Math.floor(Math.random() * NOTE_SYMBOLS.length);
    return NOTE_SYMBOLS[randomIndex];
};

// 初始化音符效果
const initNotes = () => {
    if (!notesRef.value) return;

    // 清除已有音符
    clearNotes();

    // 设置CSS变量
    notesRef.value.style.setProperty('--intensity', props.intensity);

    // 创建初始音符
    createInitialNotes();

    // 设置音符持续生成的间隔
    noteInterval = setInterval(() => {
        if (internalShow.value) {
            createScoreNote();
        }
    }, 300);
};

// 创建初始音符
const createInitialNotes = () => {
    if (!notesRef.value) return;

    // 初始创建5个音符
    for (let i = 0; i < 5; i++) {
        setTimeout(() => {
            createScoreNote();
        }, i * 200);
    }
};

// 创建单个曲谱音符
const createScoreNote = () => {
    if (!notesRef.value) return;

    const notesContainer = notesRef.value;
    const note = document.createElement('div');
    note.className = 'score-note';

    // 随机选择音符类型
    const noteType = Math.floor(Math.random() * 3);
    let noteClass = '';

    switch (noteType) {
        case 0:
            noteClass = 'note-eighth';
            break;
        case 1:
            noteClass = 'note-quarter';
            break;
        case 2:
            noteClass = 'note-half';
            break;
    }

    note.classList.add(noteClass);

    // 设置随机位置和颜色
    const staffPosition = Math.floor(Math.random() * 5) + 1; // 1-5
    const randomColor = getRandomMikuColor();
    const randomSize = 12 + Math.random() * 6 * props.intensity;

    note.style.setProperty('--staff-position', staffPosition);
    note.style.setProperty('--note-color', randomColor);
    note.style.setProperty('--note-size', `${randomSize}px`);
    note.style.setProperty('--animation-delay', `${Math.random() * 0.5}s`);
    note.style.setProperty('--animation-duration', `${2 + Math.random() * 1.5}s`);

    // 添加到容器
    notesContainer.appendChild(note);

    // 动画结束后移除
    const animationDuration = parseFloat(note.style.getPropertyValue('--animation-duration'));
    setTimeout(() => {
        if (note.parentNode === notesContainer) {
            notesContainer.removeChild(note);
        }
    }, animationDuration * 1000);
};

// 获取随机初音风格颜色
const getRandomMikuColor = () => {
    const colors = [
        '#00f2fe', // 初音蓝
        '#fe00fe', // 粉红
        '#00ff9f', // 薄荷绿
        '#fffd00', // 黄色
        '#7b00ff'  // 紫色
    ];
    return colors[Math.floor(Math.random() * colors.length)];
};

// 初始化浮动音符
const initFloatingNotes = () => {
    const floatingNotes = document.querySelectorAll('.floating-note');
    floatingNotes.forEach((note, index) => {
        // 随机位置
        const top = Math.random() * 80 + 10;
        const left = Math.random() * 80 + 10;
        const size = 20 + Math.random() * 30 * props.intensity;
        const delay = Math.random() * 2;
        const duration = 3 + Math.random() * 2;
        const color = getRandomMikuColor();

        note.style.top = `${top}%`;
        note.style.left = `${left}%`;
        note.style.fontSize = `${size}px`;
        note.style.animationDelay = `${delay}s`;
        note.style.animationDuration = `${duration}s`;
        note.style.color = color;

        // 添加发光效果
        note.style.textShadow = `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}`;
    });
};

// 初始化闪光效果
const initSparkles = () => {
    const sparkles = document.querySelectorAll('.sparkle');
    sparkles.forEach((sparkle, index) => {
        // 随机位置
        const top = Math.random() * 100;
        const left = Math.random() * 100;
        const size = 2 + Math.random() * 4;
        const delay = Math.random() * 5;
        const duration = 2 + Math.random() * 3;

        sparkle.style.top = `${top}%`;
        sparkle.style.left = `${left}%`;
        sparkle.style.width = `${size}px`;
        sparkle.style.height = `${size}px`;
        sparkle.style.animationDelay = `${delay}s`;
        sparkle.style.animationDuration = `${duration}s`;
    });
};

// 清除所有音符
const clearNotes = () => {
    if (noteInterval) {
        clearInterval(noteInterval);
        noteInterval = null;
    }

    if (notesRef.value) {
        while (notesRef.value.firstChild) {
            notesRef.value.removeChild(notesRef.value.firstChild);
        }
    }
};

// 组件卸载时清理
onUnmounted(() => {
    clearNotes();
});
</script>

<style scoped>
/* 音符特效容器 */
.node-effect-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 初音未来风格背景 */
.miku-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.1), rgba(254, 0, 254, 0.1), rgba(0, 255, 159, 0.1));
    animation: backgroundShift 15s ease-in-out infinite;
}

/* 中心曲谱容器 */
.music-score-container {
    position: relative;
    width: 600px;
    height: 300px;
    max-width: 80%;
    opacity: 0;
    animation: fadeIn 0.8s ease-out forwards;
    transform-origin: center;
    animation-delay: 0.3s;
}

/* 曲谱线 */
.score-lines {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 40px 0;
}

.score-line {
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.8);
    position: relative;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* 曲谱线特殊效果 */
.line-1 {
    animation: lineGlow 3s ease-in-out infinite;
}

.line-2 {
    animation: lineGlow 3s ease-in-out infinite 0.3s;
}

.line-3 {
    animation: lineGlow 3s ease-in-out infinite 0.6s;
}

.line-4 {
    animation: lineGlow 3s ease-in-out infinite 0.9s;
}

.line-5 {
    animation: lineGlow 3s ease-in-out infinite 1.2s;
}

/* 音符容器 */
.notes-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 曲谱音符基础样式 */
.score-note {
    position: absolute;
    width: var(--note-size);
    height: var(--note-size);
    background: var(--note-color);
    border-radius: 50%;
    top: calc(20% + (var(--staff-position) - 1) * 15%);
    left: -20px;
    transform: translateY(-50%);
    box-shadow: 0 0 15px var(--note-color), 0 0 30px var(--note-color);
    animation: noteMove calc(var(--animation-duration)) linear forwards;
    animation-delay: var(--animation-delay);
    will-change: transform, opacity;
}

/* 不同类型音符 */
.note-eighth::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background: var(--note-color);
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    box-shadow: 0 0 5px var(--note-color);
}

.note-quarter::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 2px;
    background: var(--note-color);
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    box-shadow: 0 0 5px var(--note-color);
}

.note-half::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 2px;
    background: var(--note-color);
    top: 50%;
    right: -35px;
    transform: translateY(-50%);
    box-shadow: 0 0 5px var(--note-color);
}

.note-half::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid var(--note-color);
    border-radius: 50%;
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
    box-shadow: 0 0 5px var(--note-color);
}

/* 浮动音符 */
.floating-notes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: fadeIn 1s ease-out forwards;
    animation-delay: 0.6s;
}

.floating-note {
    position: absolute;
    font-size: 30px;
    animation: floatNote 4s ease-in-out infinite;
    transform-origin: center;
    opacity: 0;
    animation-fill-mode: forwards;
}

.note-icon {
    display: inline-block;
    animation: rotateNote 8s linear infinite;
}

/* 节奏波纹 */
.rhythm-waves {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    pointer-events: none;
    opacity: 0;
    animation: fadeIn 1.2s ease-out forwards;
    animation-delay: 0.9s;
}

.wave {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(0, 242, 254, 0.3);
    border-radius: 50%;
    animation: waveExpand 5s ease-out infinite;
}

.wave-1 {
    width: 100px;
    height: 100px;
    animation-delay: 0s;
}

.wave-2 {
    width: 200px;
    height: 200px;
    animation-delay: 1s;
}

.wave-3 {
    width: 300px;
    height: 300px;
    animation-delay: 2s;
}

/* 闪光效果 */
.sparkles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    animation: fadeIn 1.5s ease-out forwards;
    animation-delay: 1.2s;
}

.sparkle {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    animation: sparklePulse 3s ease-in-out infinite;
    opacity: 0;
}

/* 动画定义 */
@keyframes backgroundShift {
    0%, 100% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes lineGlow {
    0%, 100% {
        opacity: 0.6;
        transform: scaleX(1);
    }
    50% {
        opacity: 0.9;
        transform: scaleX(1.05);
    }
}

@keyframes noteMove {
    from {
        left: -20px;
        opacity: 0;
        transform: translateY(-50%) scale(0.5);
    }
    10% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    90% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    to {
        left: calc(100% + 20px);
        opacity: 0;
        transform: translateY(-50%) scale(0.5);
    }
}

@keyframes floatNote {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    20% {
        transform: translateY(-20px) rotate(10deg);
        opacity: 1;
    }
    40% {
        transform: translateY(-10px) rotate(-5deg);
    }
    60% {
        transform: translateY(-30px) rotate(15deg);
    }
    80% {
        transform: translateY(-20px) rotate(-10deg);
    }
    100% {
        transform: translateY(-40px) rotate(5deg);
        opacity: 0;
    }
}

@keyframes rotateNote {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes waveExpand {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

@keyframes sparklePulse {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}
</style>